<template>
	<el-card shadow="never">
		<template #header>
			{{ title }}
		</template>
		<el-table :data="tableData" height="254px">
			<el-table-column prop="title" label="标题" width="200" show-overflow-tooltip />
			<el-table-column prop="image" label="缩略图" width="100">
				<template #default="{ row }">
					<el-image
						class="h-[30px]"
						:src="row.image"
						preview-teleported="true"
						:preview-src-list="[row.image]"
						fit="contain"
					/>
				</template>
			</el-table-column>
			<el-table-column prop="cate_name" label="栏目名称" width="100" />
			<el-table-column prop="hits" label="点击量" width="100" />
			<el-table-column label="链接" fixed="right">
				<template #default="{ row }">
					<router-link
						:to="{
							path: '/cms/article/edit',
							query: { id: row.id },
						}"
						><el-button size="small" text type="primary">详情</el-button></router-link
					>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = defineProps({
	title: {
		type: String,
		default: '文章排行',
	},
	data: {
		type: Object,
		default: () => ({}),
	},
});

const tableData = ref(props.data?.article_rank_list || []);
</script>

<style lang="scss" scoped>
.number {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	font-size: 32px;
	font-weight: 400;
	color: #333;
	line-height: 40px;
}
</style>
